<template>
  <div class="store-records">
    <div class="records-list">
      <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="record-item" v-for="(item,index) in recordsList" :key="index">
          <record-item :recordName="type[item.type]" :recordTime="item.createTime">
            <div class="record-info" slot="content">
              <div class="order-info">
                <p v-if="item.type == 'out' && item.msg && !item.takeGoodsPeople">
                  <span>发起提货订单</span>
                  <!-- <span>854112301654426</span> -->
                </p>
                <p v-if="item.type == 'out' && !item.msg && item.takeGoodsPeople">
                  <span>收货方：</span>
                  <span>{{item.takeGoodsPeople}}</span>
                </p>
                <!-- <p v-if="item.type == 'in'">
                  <span>收货方：</span>
                  <span>{{item.takeGoodsPeople}}</span>
                </p> -->

                <div class="goods-list">
                  <div class="goods-item" v-for="(i,n) in item.goods" :key="n">
                    <p>{{i.goodsName}}</p>
                    <p>{{i.price}} x {{i.num}}</p>
                  </div>
                </div>
                <!-- <p>
                  <span>状态：</span>
                  <span>已完成</span>
                </p>-->
              </div>
            </div>
          </record-item>
        </div>
      </list>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, List,Icon } from "vant";
import recordItem from "../components/record_item.vue";
import navbar from "../components/navbar.vue";

export default {
  components: {
    recordItem,
    navbar,
    Tab,
    Tabs,
    List,Icon
  },
  data() {
    return {
      active: 0,
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      recordsList: [],
      type: {
        out: "出仓",
        in: "入仓"
      }
    };
  },
  methods: {
    onLoad() {
      return this.$http
        .post(this.$urls.YCDDMX, {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            this.recordsList = this.recordsList.concat(res.data.data);

            this.pageNumber++;
            this.loading = false;
          } else if (res.data.code == 300) {
            this.loading = false;
            this.finished = true;
          }
        })
        .catch(err => {});
    }
  }
};
</script>

<style scoped>
.records-list {
  margin-top: 5px;
}

.record-item {
  margin-top: 1px;
  background-color: #fff;
  margin-bottom: 5px;
}

.record-info {
  padding: 0 15px 10px 15px;
  text-align: left;
  font-size: 0.93rem;
}

.order-info {
  margin-top: 1px;
}

.goods-item{
  display: flex;
  justify-content: space-between;
}
</style>